<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<style>
    body {
        background: #d5b16e;
        font-size: 16px;
    }

    .box {
        display: flex;
        position: relative;
        flex-direction: column;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 80%;
        min-height: 80vh;
        background: #ffd39c;
        padding: 16px;
        border: #5d3e04 4px solid;
        border-radius: 16px;
        margin-top: 40px;
        margin-bottom: 60px;
        max-width: 800px;
    }

    .row1 {
        margin: 10px;
        align-self: center;
    }

    .row2 {
        display: flex;
        height: 100%;
        flex: 1;
        overflow: auto;
    }

    .row2-item {
        flex: 1;
        margin: 10px;
        overflow: auto;
    }

    table {
        border-collapse: collapse;
        border: 1px solid black;
        width: 100%;
        text-align: center;
    }

    th,
    td {
        border: 1px solid black;
    }
</style>

<body>
    <div class="box">
        <div class="row1">
            <input type="number" id="groupOption" placeholder="输入分组个数或每组人数">
            <label><input type="radio" name="groupMethod" value="byGroupCount" checked>按分组个数分组</label>
            <label><input type="radio" name="groupMethod" value="byGroupSize">按每组人数分组</label>
            <button onclick="groupNames()">分组</button>
        </div>
        <div class="row2">
            <textarea class="row2-item" id="namesInput" placeholder="输入姓名，每行一个"></textarea>

            <!-- <pre id="result"></pre> -->
            <div class="row2-item" style="flex:2">
                <table>
                    <thead>
                        <tr>
                            <th>组号</th>
                            <th>组员</th>
                        </tr>
                    </thead>
                    <tbody id="result">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        function groupNames() {
            const namesInput = document.getElementById('namesInput').value;
            const groupOptionInput = document.getElementById('groupOption').value;
            const names = namesInput.split('\n').filter(name => name.trim() !== '');

            // 随机重排姓名数组
            for (let i = names.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [names[i], names[j]] = [names[j], names[i]];
            }

            let groups;
            if (isNaN(groupOptionInput)) {
                console.error('输入的分组个数或每组人数不是有效的数字。');
                return;
            }

            const groupOption = parseInt(groupOptionInput);
            const selectedMethod = document.querySelector('input[name="groupMethod"]:checked').value;
            if (selectedMethod === 'byGroupCount') {
                groups = new Array(groupOption).fill().map(() => []);
                for (let i = 0; i < names.length; i++) {
                    groups[i % groupOption].push(names[i]);
                }
            } else if (selectedMethod === 'byGroupSize') {
                if (names.length % groupOption === 0) {
                    const numGroups = names.length / groupOption;
                    groups = new Array(numGroups).fill().map(() => []);
                    for (let i = 0; i < names.length; i++) {
                        groups[i % numGroups].push(names[i]);
                    }
                } else {
                    groups = new Array(groupOption).fill().map(() => []);
                    let index = 0;
                    for (const name of names) {
                        groups[index].push(name);
                        index = (index + 1) % groupOption;
                    }
                }
            }
            const tbody = document.getElementById('result');
            // 移除所有子元素
            while (tbody.firstChild) {
                tbody.removeChild(tbody.firstChild);
            }
            for (let i = 0; i < groups.length; i++) {
                console.log(i);
                for (let j = 0; j < groups[i].length; j++) {
                    let row = document.createElement("tr");
                    if (j == 0) {
                        let num = document.createElement("td");
                        num.rowSpan = groups[i].length;
                        num.textContent = i + 1
                        // num.style.maxWidth = "80px" //p 标签类元素不管用
                        row.appendChild(num);
                    }
                    let col = document.createElement("td");
                    col.textContent = groups[i][j];
                    row.appendChild(col);
                    tbody.appendChild(row);
                }

            }
            // document.getElementById('result').textContent = JSON.stringify(groups, null, 2);
        }
    </script>
</body>

</html>